// Also see material design material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
@import "grid-variables";
// Mixins are reserved for "smart stuffs", flex one-liners are kept intact
@import "grid-mixins";
@import "grid-spacing";

// variables for runtime calculations, --va-media-ratio variable is overwritten by breakpoint service
:root,
:host {
  --va-media-ratio-default: var(--va-media-ratio, 1);
  --va-grid-gutter-default: 0.5rem;
  --va-grid-gutter-base: calc(var(--va-media-ratio-default) * var(--va-grid-gutter-default));
  --va-grid-spacing-default: 1rem;
  --va-grid-spacing-base: calc(var(--va-media-ratio-default) * var(--va-grid-spacing-default));
}

.layout {
  @include va-container();

  &.fluid {
    @include va-container-fluid();
  }

  // NOTE Not exactly sure on this one. Here's what manual says:
  // > Make sure that col element height is filled with parent and child. Important for Safari/Firefox if children is column element.
  &.fill-height {
    @include va-container-fill-height();

    > .row {
      flex: 1 1 auto;
      height: 100%;
    }
  }

  // generating gutter classes
  @each $size, $gutter in $grid-gutters {
    &.va-gutter-#{$size} {
      padding: $gutter;

      .row:only-child {
        margin: #{calc($gutter * (-0.5))};
      }

      .row:not(:only-child) {
        margin: auto #{calc($gutter * (-0.5))};
      }

      *:not(:only-child) {
        .row:first-child {
          margin-top: #{calc($gutter * (-0.5))};
        }

        .row:last-child {
          margin-bottom: #{calc($gutter * (-0.5))};
        }
      }

      .row .flex {
        padding: #{calc($gutter * 0.5)};
      }
    }
  }
}

.row {
  @include va-layout();

  &.row {
    flex-direction: row;

    &.reverse {
      flex-direction: row-reverse;
    }
  }

  &.column {
    flex-direction: column;

    &.reverse {
      flex-direction: column-reverse;
    }

    > .flex {
      max-width: 100%;
    }
  }

  &.no-wrap {
    flex-wrap: nowrap;
  }
}

.flex-center {
  @include va-flex-center();
}

.flex {
  @include va-flex();

  @each $size, $width in $grid-breakpoints {
    @include va-flex-breakpoint($size) {
      @for $n from 1 through $grid-columns {
        @if $n != 0 {
          &.#{$size}#{$n} {
            @include va-flex-size($n);
          }

          &.order-#{$size}#{$n} {
            order: $n;
          }
        }
        // 0 offset is used to override offset from lower breakpoint.
        &.offset-#{$size}#{$n} {
          @include va-flex-offset($n);
        }
      }
    }
  }

  &-nowrap {
    flex-wrap: nowrap;
  }

  &-wrap {
    flex-wrap: wrap;
  }
}

.align {
  &-start {
    align-items: flex-start;
  }

  &-end {
    align-items: flex-end;
  }

  &-center {
    align-items: center;
  }

  &-baseline {
    align-items: baseline;
  }
}

.align-self {
  &-start {
    align-self: flex-start;
  }

  &-end {
    align-self: flex-end;
  }

  &-center {
    align-self: center;
  }

  &-baseline {
    align-self: baseline;
  }
}

.align-content {
  &-start {
    align-content: flex-start;
  }

  &-end {
    align-content: flex-end;
  }

  &-center {
    align-content: center;
  }

  &-space-between {
    align-content: space-between;
  }

  &-space-around {
    align-content: space-around;
  }
}

.justify {
  &-start {
    justify-content: flex-start;
  }

  &-end {
    justify-content: flex-end;
  }

  &-center {
    justify-content: center;
  }

  &-space-around {
    justify-content: space-around;
  }

  &-space-between {
    justify-content: space-between;
  }

  &-space-evenly {
    justify-content: space-evenly;
  }
}

.justify-self {
  &-start {
    justify-self: flex-start;
  }

  &-end {
    justify-self: flex-end;
  }

  &-center {
    justify-self: center;
  }

  &-baseline {
    justify-self: baseline;
  }
}

.flex-direction {
  &-row {
    flex-direction: row;
  }

  &-row-reverse {
    flex-direction: row-reverse;
  }

  &-column {
    flex-direction: column;
  }

  &-column-reverse {
    flex-direction: column-reverse;
  }
}

.grow {
  @include va-grow();
}

.shrink {
  @include va-shrink();
}

.overflow {
  &-hidden {
    overflow: hidden !important;
  }

  &-visible {
    overflow: visible !important;
  }
}

.overflow-y {
  overflow-y: auto;
}

.overflow-x {
  overflow-x: auto;
}

// Display helpers
.d-block {
  display: block !important;
}

.d-flex {
  display: flex !important;
}

.ellipsis {
  @include va-ellipsis();
}
